<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <title>6折换电</title>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mobiscroll.custom.min.js"></script>
    <link rel="stylesheet" href="css/mobiscroll.custom.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
        }

        .content-head {
            display: flex;
            margin: 10px 0 15px 10px;
        }

        .content-bottom {
            margin: 0 auto;
            width: 95%;
            font-size: 15px;
        }

        p {
            margin: 5px;
        }

        .bottom-head {
            display: flex;
            margin: 30px 0 25px 10px;
        }

        .contact-input {
            width: 94%;
            border-bottom: .5px solid #E5E5E5;
            padding: 3%;
            display: flex;
        }

        input {
            border: 0;
            outline: none;
            margin-left: 5px;
            font-size: 15px;
        }

        button {
            color: #fff;
            background: #FC8A02;
            width: 80%;
            border: 0;
            border-radius: 999px;
            text-align: center;
            outline: none;
            height: 45px;
            font-size: 20px;
            letter-spacing: 1px;
        }

        .access {
            margin: 40px auto;
            display: flex;
            justify-content: center;
        }

        .mask {
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .5;
            z-index: 2;
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
            display: none;
        }

        .choose-content {
            height: 320px;
            width: 100%;
            background: #fff;
            z-index: 4;
            position: fixed;
            bottom: 0;
            display: none;
            overflow-y: scroll;
        }

        .scroll-content {
            overflow-y: scroll;
            width: 100%;
        }

        .yes {
            position: fixed;
            background: #00BFFF;
            text-align: center;
            padding: 15px 0;
            width: 50%;
            font-size: 20px;
            color: #fff;
            bottom: 0;
            z-index: 5;
        }

        .no {
            text-align: center;
            background: #E5E5E5;
            width: 50%;
            padding: 15px 0;
            font-size: 20px;
            color: #fff;
            position: fixed;
            bottom: 0;
            z-index: 5;
            left: 50%;
        }
    </style>
</head>

<body>
    <div class="contain">
        <img src="image/head.png" alt="">
        <div class="content">
            <div class="content-head">
                <div style="width: 3px; height: 25px; background: #FC8A02; margin-right: 10px;"></div>
                <h3>活动规则</h3>
            </div>
            <div class="content-bottom">
                <p>1. 本次活动仅限铅酸电池</p>
                <p>2. 电池换新后, 本公司将免费回收旧电池</p>
                <p>3. 填写下方表格参加活动后请按时去指定地点换电</p>
                <p>4. 如有疑问请致电: 400 6888 919</p>
                <p>5. 本活动最终结解释权归本公司所有</p>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-head">
                <div style="width: 3px; height: 25px; background: #FC8A02; margin-right: 10px;"></div>
                <h3>填写信息预约换电</h3>
            </div>
            <div class="contact">
                <div class="contact-input">
                    <span>联系人</span><input type="text" placeholder="请输入姓名" class="name">
                </div>
                <div class="contact-input">
                    <span>手机号码</span><input type="text" placeholder="请输入电话号码" class="tel">
                </div>
                <div class="contact-input">
                    <span>电池型号</span><input type="text" readonly="true" placeholder="请选择型号" class="battery">
                </div>
                <div class="contact-input">
                    <span>换电地址</span><textarea style="height: 55px; border: 0; margin-left: 10px;" id="" cols="30"
                        rows="10" readonly="true" placeholder="请输入地址" class="add"></textarea>
                </div>
                <div class="contact-input">
                    <span>预约时间</span><input type="text" id="demo_time" placeholder="请选择时间" class="mbsc-comp">
                </div>
            </div>
            <div class="access">
                <button class="confirm">确认</button>
            </div>
        </div>
    </div>
    <div class="mask"></div>
    <div class="choose-content">
        <div class="scroll-content"></div>
        <div style="height: 56px;"></div>
        <div class="button-event">
            <div class="yes">确定</div>
            <div class="no">取消</div>
        </div>
    </div>
</body>
<script>
    $(() => {
        let theme = "ios"
        let mode = "scroller"
        let display = "bottom"
        let lang = "zh"
        let uid = getUrldata('Uid')
        let emotion = /([^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n])|(\s)/g

        //判断微信
        function isWeiXin() {
            var ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return true; // 是微信端
            } else {
                return false;
            }
        }

        // 获取接口
        $.ajax({
            type: 'POST',
            url: ' https://api.cd1a.cn/index.php/activity/Swapnew/IndexData',
            data: {
                userid_locked: uid
            }
        }).then(res => {
            console.log(res.data)
            if (res.data.user_order != null) {
                localStorage.setItem('id', res.data.user_order.id)
                $('.name').val(res.data.user_order.name)
                $('.tel').val(res.data.user_order.tel)
                $('.battery').val(res.data.user_order.size)
                $('.add').val(res.data.user_order.address)
                $('#demo_time').val(res.data.user_order.maketime)
                if (res.data.user_order.status == '1') {
                    if (isWeiXin()) {
                        (() => {
                            window.alert = function (name) {
                                var iframe = document.createElement("IFRAME");
                                iframe.style.display = "none";
                                iframe.setAttribute("src", 'data:text/plain');
                                document.documentElement.appendChild(iframe);
                                window.frames[0].window.alert(name);
                                iframe.parentNode.removeChild(iframe);
                            }
                        })()
                        alert('您有订单未处理')
                        window.location.href = 'pay_car.html?id=' + res.data.user_order.id
                    }
                } else {
                    if (isWeiXin()) {
                        (() => {
                            window.alert = function (name) {
                                var iframe = document.createElement("IFRAME");
                                iframe.style.display = "none";
                                iframe.setAttribute("src", 'data:text/plain');
                                document.documentElement.appendChild(iframe);
                                window.frames[0].window.alert(name);
                                iframe.parentNode.removeChild(iframe);
                            }
                        })()
                        alert('您已支付成功')
                        $('.confirm').attr('disabled', 'disabled')
                    }
                }
            }
            // 电池型号
            $('.battery').click(() => {
                $('.mask').show()
                $('.choose-content').show()
                $('.adr').remove()
                $('.bat').remove()
                for (let i = 0; i < res.data.batterylist.length; i++) {
                    let content = `<div class='bat' id=${i} style="margin: 8px 0; display:flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20px;">` +
                        res.data.batterylist[i].size
                        + '</div>'
                    $('.scroll-content').append(content)
                }
                $('.scroll-content').click((e) => {
                    for (let i = 0; i < res.data.batterylist.length; i++) {
                        $(`#${i}`).css('background', '#fff')
                        if (e.target.innerHTML == res.data.batterylist[i].size) {
                            $(`#${i}`).css('background', '#00BFFF')
                            // picker选择确认
                            $('.yes').click(() => {
                                $('.mask').hide()
                                $('.choose-content').hide()
                                $('.battery').val(res.data.batterylist[i].size)
                            })
                        }
                    }
                })
            })

            // 换电地址
            $('.add').click(() => {
                $('.mask').show()
                $('.choose-content').show()
                $('.bat').remove()
                $('.adr').remove()
                for (let a = 0; a < res.data.addresslist.length; a++) {
                    let content = `<div class='adr' id=${a} style="font-size: 20px; margin: 8px 0; padding: 0 10px;">` + res.data.addresslist[a].address + '<div>'
                    $('.scroll-content').append(content)
                }
                $('.scroll-content').click((e) => {
                    for (let a = 0; a < res.data.addresslist.length; a++) {
                        $(`#${a}`).css('background', '#fff')
                        if (e.target.innerHTML == res.data.addresslist[a].address + '<div></div>') {
                            $(`#${a}`).css('background', '#00BFFF')
                            $('.yes').click(() => {
                                $('.mask').hide()
                                $('.choose-content').hide()
                                $('.add').val(res.data.addresslist[a].address)
                            })
                        }
                    }
                })
            })
        })

        // 预约时间
        $('#demo_time').mobiscroll().datetime({
            theme: theme,
            mode: mode,
            display: display,
            lang: lang,
            dateFormat: "yyyy-mm-dd",
            minDate: new Date(2000, 3, 10, 9, 22),
            maxDate: new Date(2030, 7, 30, 15, 44),
            stepMinute: 1
        });

        $('.no').click(() => {
            $('.mask').hide()
            $('.choose-content').hide()
        })

        function mobile() {
            if (isWeiXin()) {
                (() => {
                    window.alert = function (name) {
                        var iframe = document.createElement("IFRAME");
                        iframe.style.display = "none";
                        iframe.setAttribute("src", 'data:text/plain');
                        document.documentElement.appendChild(iframe);
                        window.frames[0].window.alert(name);
                        iframe.parentNode.removeChild(iframe);
                    }
                })()
                alert('电话有误,请重新输入')
                return
            }
        }

        function content() {
            if (isWeiXin()) {
                (() => {
                    window.alert = function (name) {
                        var iframe = document.createElement("IFRAME");
                        iframe.style.display = "none";
                        iframe.setAttribute("src", 'data:text/plain');
                        document.documentElement.appendChild(iframe);
                        window.frames[0].window.alert(name);
                        iframe.parentNode.removeChild(iframe);
                    }
                })()
                alert('请输入内容')
                return
            }
        }

        function err() {
            if (isWeiXin()) {
                (() => {
                    window.alert = function (name) {
                        var iframe = document.createElement("IFRAME");
                        iframe.style.display = "none";
                        iframe.setAttribute("src", 'data:text/plain');
                        document.documentElement.appendChild(iframe);
                        window.frames[0].window.alert(name);
                        iframe.parentNode.removeChild(iframe);
                    }
                })()
                alert('输入内容有误')
                return
            }
        }

        $('.confirm').click(() => {
            let name = $('.name').val()
            let tel = $('.tel').val()
            let battery = $('.battery').val()
            let add = $('.add').val()
            let time = $('#demo_time').val()
            let localTime = set_time()
            if (name == '' || tel == '' || battery == '' || add == '' || time == '') {
                content()
            } else if (/^1[3456789]\d{9}$/.test(tel) == false) {
                mobile()
            } else if (emotion.test(name) || emotion.test(tel)) {
                err()
            } else {
                $.ajax({
                    type: 'POST',
                    url: 'https://api.cd1a.cn/index.php/activity/Swapnew/add_order',
                    data: {
                        userid_locked: uid,
                        name: name,
                        tel: tel,
                        size: battery,
                        address: add,
                        addtime: localTime,
                        maketime: time
                    }
                }).then((res) => {
                    console.log(res)
                    if (res.code == '2') {
                        window.location.href = 'pay_car.html?id=' + res.data.order_id
                    } else if (res.code == '3') {
                        if (isWeiXin()) {
                            (() => {
                                window.alert = function (name) {
                                    var iframe = document.createElement("IFRAME");
                                    iframe.style.display = "none";
                                    iframe.setAttribute("src", 'data:text/plain');
                                    document.documentElement.appendChild(iframe);
                                    window.frames[0].window.alert(name);
                                    iframe.parentNode.removeChild(iframe);
                                }
                            })()
                            alert(res.msg)
                            window.location.href = 'pay_car.html?id=' + localStorage.getItem('id')
                        }
                    } else {
                        if (isWeiXin()) {
                            (() => {
                                window.alert = function (name) {
                                    var iframe = document.createElement("IFRAME");
                                    iframe.style.display = "none";
                                    iframe.setAttribute("src", 'data:text/plain');
                                    document.documentElement.appendChild(iframe);
                                    window.frames[0].window.alert(name);
                                    iframe.parentNode.removeChild(iframe);
                                }
                            })()
                            alert(res.msg)
                        }
                    }
                })
            }
        })

        function set_time() {
            let d = new Date();
            let year = d.getFullYear();
            let month = d.getMonth();
            month = month + 1 > 12 ? 1 : month + 1;
            month = month > 9 ? month : "0" + month.toString();
            let day = d.getDate();
            let hour = d.getHours();
            hour = hour > 9 ? hour : "0" + hour.toString();
            let minute = d.getMinutes();
            minute = minute > 9 ? minute : "0" + minute.toString();
            let second = d.getSeconds();
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        }

        function getUrldata(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            let r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }
    })
</script>

</html>